<template>
    <el-dialog v-model="state.show" :title="state.title" width="600px" @closed="onClosed">
        <el-form ref="formRef" :model="form">
            <el-form-item label="是否公开展示">
                <el-radio-group v-model="form.isShow">
                    <el-radio :label="1">公开展示</el-radio>
                    <el-radio :label="2">不公开展示</el-radio>
                </el-radio-group>
                <div class="desc">
                    设置不公开展示后，商品将不会展示在商品分类/搜索商品页面，不影响商品在组件和活动中的使用。
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.show = false">取消</el-button>
            <el-button type="primary" @click="onConfirm(formRef)"> 确定 </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const emit = defineEmits(['confirm']);

const state = reactive({
    show: false,
    title: '设置展示规则',
    auditType: 'merchantSatus',
    tenantId: '',
    identId: ''
});

const formRef = ref(null);
const form = reactive({
    batchGoods: [],
    isShow: 1
});

const onClosed = () => {
    emit('update:modelValue', false);
    form.isShow = 1;
    form.batchGoods = [];
};

const onConfirm = async formEl => {
    if (!formEl) return;
    await formEl.validate();
    await request('goodsPublic', form);
    const message = '设置成功';
    ElMessage.success(message);
    state.show = false;
    emit('success');
};

const openDialog = query => {
    state.show = true;
    form.batchGoods = query;
};
defineExpose({
    openDialog
});
</script>
<style lang="scss" scoped>
:deep(.el-form-item__error) {
    margin-top: 4px;
}
.desc {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 18px;
}
</style>
